import {Modal, Button, Col, Row, message} from "antd";
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react'
import ConfirmDialog from "../../content/confirmDialog";
import React, {useState} from "react";  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新
import {useNavigate,Navigate} from "react-router-dom";
import {values} from "mobx";

const MemberListOperation = () => {
    const navigate = useNavigate();
    //是否显示确认解冻对话框
    const [isUpperShelfModalOpen, setIsUpperShelfModalOpen] = useState(false);
    //是否显示确认冻结对话框
    const [isLowerShelfModalOpen, setIsLowerShelfModalOpen] = useState(false);


    //点击解冻对话框确定按钮
    const handleUpperShelfOk = () => {
        setIsUpperShelfModalOpen(false);
        // 设置选中行的-状态
        // store.memberShip.setSelectRowKeys(values)
        let arr3=[...store.memberShip.memberTableList]
        let arr7=[...store.memberShip.selectRowKeys]
        console.log(store.memberShip.selectRowKeys)/*选中行的id*/


        return message.success("解冻成功！")
    };
    //点击解冻对话框取消按钮
    const handleUpperShelfCancel = () => {
        setIsUpperShelfModalOpen(false);
    };
    //点击冻结对话框确定按钮
    const handleLowerShelfOk = () => {
        setIsLowerShelfModalOpen(false);
        // 设置选中行的-状态

       return  message.success("冻结成功！")

    };
    //点击冻结对话框取消按钮
    const handleLowerShelfCancel = () => {
        setIsLowerShelfModalOpen(false);
    };

    //添加会员
    const addhuiyuan = () => {
        console.log("添加会员")
        navigate('/home/Newhuiyuan')
    };

    return <Row gutter={16}>
        <Col>
            <Button type="primary" onClick={()=>{
                addhuiyuan()}}
        >添加</Button>
        </Col>
        <Col>
            <Button type="primary" onClick={()=>{
                console.log("解冻")
                //拿到选中条数,如果等于0，就谭树警告。不不弹对话框
                if((store.memberShip.selectRowKeys.length)===0){
                    setIsUpperShelfModalOpen(false);
                    message.warn("请选择要解冻的数据！！！")
                }else {
                    setIsUpperShelfModalOpen(true);
                }
            }
            }>解冻</Button>
        </Col>
        <Col>
            <Button type="primary" onClick={()=>{
                console.log("冻结")
                if((store.memberShip.selectRowKeys.length)===0){
                    setIsLowerShelfModalOpen(false);
                    message.warn("请选择要冻结的数据！！！")
                }else {
                    setIsLowerShelfModalOpen(true);
                }
            }
            }>冻结</Button>
        </Col>

        <ConfirmDialog
            isModalOpen={isUpperShelfModalOpen}
            title={'解冻'}
            text={'你确定要解冻选中的'+store.memberShip.selectRowKeys.length+'个选项吗？'}
            handleOk={handleUpperShelfOk}
            handleCancel={handleUpperShelfCancel}
        />
        <ConfirmDialog
            isModalOpen={isLowerShelfModalOpen}
            title={'冻结'}
            text={'你确定要冻结选中的'+store.memberShip.selectRowKeys.length+'个选项吗？'}
            handleOk={handleLowerShelfOk}
            handleCancel={handleLowerShelfCancel}
        />

    </Row>

}
export default observer(MemberListOperation)
